React experimental_useFormStatus: Põhjalik juhend täiustatud vormihalduseks

            // app/contact-form.jsx (Server Component)
'use server';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';
  // Simuleerime asünkroonset vormi esitamist
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    throw new Error('All fields are required.');
  }

  // Reaalses rakenduses saadaksite andmed serverisse
  console.log('Form data:', { name, email, message });

  return { success: true, message: 'Thank you for your submission!' };
}

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      

        Name:
        
      
      

        Email:
        
      
      

        Message:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {data?.success && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbnRhY3QtZm9ybS5qc3ggKFNlcnZlciBDb21wb25lbnQpCid1c2Ugc2VydmVyJzsKCmltcG9ydCB7IGV4cGVyaW1lbnRhbF91c2VGb3JtU3RhdHVzIGFzIHVzZUZvcm1TdGF0dXMgfSBmcm9tICdyZWFjdC1kb20nOwoKYXN5bmMgZnVuY3Rpb24gaGFuZGxlU3VibWl0KGZvcm1EYXRhKSB7CiAgJ3VzZSBzZXJ2ZXInOwogIC8vIFNpbXVsZWVyaW1lIGFz/G5rcm9vbnNldCB2b3JtaSBlc2l0YW1pc3QKICBhd2FpdCBuZXcgUHJvbWlzZSgocmVzb2x2ZSkgPT4gc2V0VGltZW91dChyZXNvbHZlLCAyMDAwKSk7CgogIGNvbnN0IG5hbWUgPSBmb3JtRGF0YS5nZXQoJ25hbWUnKTsKICBjb25zdCBlbWFpbCA9IGZvcm1EYXRhLmdldCgnZW1haWwnKTsKICBjb25zdCBtZXNzYWdlID0gZm9ybURhdGEuZ2V0KCdtZXNzYWdlJyk7CgogIGlmICghbmFtZSB8fCAhZW1haWwgfHwgIW1lc3NhZ2UpIHsKICAgIHRocm93IG5ldyBFcnJvcignQWxsIGZpZWxkcyBhcmUgcmVxdWlyZWQuJyk7CiAgfQoKICAvLyBSZWFhbHNlcyByYWtlbmR1c2VzIHNhYWRha3NpdGUgYW5kbWVkIHNlcnZlcmlzc2UKICBjb25zb2xlLmxvZygnRm9ybSBkYXRhOicsIHsgbmFtZSwgZW1haWwsIG1lc3NhZ2UgfSk7CgogIHJldHVybiB7IHN1Y2Nlc3M6IHRydWUsIG1lc3NhZ2U6ICdUaGFuayB5b3UgZm9yIHlvdXIgc3VibWlzc2lvbiEnIH07Cn0KCmZ1bmN0aW9uIENvbnRhY3RGb3JtKCkgewogIGNvbnN0IHsgcGVuZGluZywgZGF0YSwgZXJyb3IgfSA9IHVzZUZvcm1TdGF0dXMoKTsKCiAgcmV0dXJuICgKICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0fT4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibmFtZSI+TmFtZTo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0ibmFtZSIgbmFtZT0ibmFtZSIgZGlzYWJsZWQ9e3BlbmRpbmd9IC8+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJlbWFpbCI+RW1haWw6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJlbWFpbCIgbmFtZT0iZW1haWwiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibWVzc2FnZSI+TWVzc2FnZTo8L2xhYmVsPgogICAgICAgIDx0ZXh0YXJlYSBpZD0ibWVzc2FnZSIgbmFtZT0ibWVzc2FnZSIgZGlzYWJsZWQ9e3BlbmRpbmd9IC8+CiAgICAgIDwvZGl2PgogICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCIgZGlzYWJsZWQ9e3BlbmRpbmd9PgogICAgICAgIHtwZW5kaW5nID8gJ1N1Ym1pdHRpbmcuLi4nIDogJ1N1Ym1pdCd9CiAgICAgIDwvYnV0dG9uPgoKICAgICAge2Vycm9yICYmIDxwIHN0eWxlPXt7IGNvbG9yOiAncmVkJyB9fT5FcnJvcjoge2Vycm9yLm1lc3NhZ2V9PC9wPn0KICAgICAge2RhdGE/LnN1Y2Nlc3MgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdncmVlbicgfX0+e2RhdGEubWVzc2FnZX08L3A+fQogICAgPC9mb3JtPgogICk7Cn0KCmV4cG9ydCBkZWZhdWx0IENvbnRhY3RGb3JtOwo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Selgitus:</b></p>

<ol>
  <li><b>'use server':</b> See direktiiv määrab <code>handleSubmit</code> funktsiooni Reacti serveritoiminguks (Server Action). Serveritoimingud võimaldavad teil käivitada serveripoolset koodi otse oma Reacti komponentidest.</li>
  <li><b><code>useFormStatus()</code>:</b> Kutsume <code>useFormStatus()</code> hooki <code>ContactForm</code> komponendi sees. See tagastab objekti järgmiste omadustega:</li>
    <ul>
      <li><code>pending</code>: Boole'i väärtus, mis näitab, kas vormi hetkel esitatakse.</li>
      <li><code>data</code>: Andmed, mille serveritoiming tagastab pärast edukat esitamist.</li>
      <li><code>error</code>: Veaobjekt, kui serveritoiming viskab vea.</li>
    </ul>
  <li><b>Vormi elemendid:</b> Vorm sisaldab nime, e-posti ja sõnumi sisestusvälju. <code>disabled</code> atribuut on seatud väärtusele <code>pending</code>, mis takistab kasutajal vormiga suhtlemist selle esitamise ajal.</li>
  <li><b>Esitamisnupp:</b> Esitamisnupu tekst muutub "Esitan..."-ks, kui <code>pending</code> on tõene.</li>
  <li><b>Vea- ja eduteated:</b> Komponent kuvab veateate, kui <code>error</code> on olemas, ja eduteate, kui <code>data.success</code> on tõene.</li>
</ol>

<h3><code>useFormStatus</code>'i tagastatavad omadused</h3>

<ul>
  <li><b><code>pending</code>:</b> Boole'i väärtus, mis näitab, kas vormi hetkel esitatakse. See on kasulik esitamisnupu keelamiseks ja laadimisindikaatori kuvamiseks.</li>
  <li><b><code>data</code>:</b> Andmed, mille serveritoiming tagastab pärast edukat vormi esitamist. See võib olla mis tahes serialiseeritav väärtus.
  <li><b><code>error</code>:</b> Veaobjekt, kui serveritoiming viskas esitamise ajal erandi. See võimaldab teil kuvada kasutajale veateateid.</li>
  <li><b><code>action</code>:</b> Serveritoimingu funktsioon, mis välja kutsuti. See võib olla kasulik selleks, et tuvastada, milline toiming oli praeguse staatuse eest vastutav.</li>
  <li><b><code>formState</code>:</b> (Harvemini kasutatav) Vormiga seotud vormi olek. See on eriti asjakohane, kui haldate vormi olekut väliselt.</li>
</ul>

<h2>Täiustatud kasutusjuhud</h2>

<h3>1. Dünaamiline veakäsitlus ja valideerimine</h3>

<p><code>experimental_useFormStatus</code>'i saab kasutada dünaamilise veakäsitluse ja valideerimise implementeerimiseks. Näiteks saate kontrollida <code>error</code> omadust ja kuvada konkreetseid veateateid vastavalt tekkinud vea tüübile.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>function ContactForm() {
  const { pending, data, error } = useFormStatus();

  let errorMessage = null;

  if (error) {
    if (error.message === 'All fields are required.') {
      errorMessage = 'Please fill out all the required fields.';
    } else {
      errorMessage = 'An error occurred while submitting the form.';
    }
  }

  return (
    <form action={handleSubmit}>
      {/* ... form fields ... */}

      {errorMessage && <p style={{ color: 'red' }}>Error: {errorMessage}</p>}
      {data?.success && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="ZnVuY3Rpb24gQ29udGFjdEZvcm0oKSB7CiAgY29uc3QgeyBwZW5kaW5nLCBkYXRhLCBlcnJvciB9ID0gdXNlRm9ybVN0YXR1cygpOwoKICBsZXQgZXJyb3JNZXNzYWdlID0gbnVsbDsKCiAgaWYgKGVycm9yKSB7CiAgICBpZiAoZXJyb3IubWVzc2FnZSA9PT0gJ0FsbCBmaWVsZHMgYXJlIHJlcXVpcmVkLicpIHsKICAgICAgZXJyb3JNZXNzYWdlID0gJ1BsZWFzZSBmaWxsIG91dCBhbGwgdGhlIHJlcXVpcmVkIGZpZWxkcy4nOwogICAgfSBlbHNlIHsKICAgICAgZXJyb3JNZXNzYWdlID0gJ0FuIGVycm9yIG9jY3VycmVkIHdoaWxlIHN1Ym1pdHRpbmcgdGhlIGZvcm0uJzsKICAgIH0KICB9CgogIHJldHVybiAoCiAgICA8Zm9ybSBhY3Rpb249e2hhbmRsZVN1Ym1pdH0+CiAgICAgIHsvKiAuLi4gZm9ybSBmaWVsZHMgLi4uICovfQoKICAgICAge2Vycm9yTWVzc2FnZSAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+RXJyb3I6IHtlcnJvck1lc3NhZ2V9PC9wPn0KICAgICAge2RhdGE/LnN1Y2Nlc3MgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdncmVlbicgfX0+e2RhdGEubWVzc2FnZX08L3A+fQogICAgPC9mb3JtPgogICk7Cn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>2. Optimistlikud uuendused</h3>

<p>Optimistlikud uuendused hõlmavad kasutajaliidese kohest uuendamist nii, nagu oleks vormi esitamine edukas, isegi enne serverilt kinnituse saamist. See võib parandada kasutajakogemust, muutes rakenduse tundlikumaks. <code>experimental_useFormStatus</code>'i saab kasutada optimistlike uuenduste haldamiseks, hoides optimistlike andmete jälgimiseks eraldi olekumuutujat.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>import { useState } from 'react';
import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';
  // Simuleerime asünkroonset vormi esitamist
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    throw new Error('All fields are required.');
  }

  // Reaalses rakenduses saadaksite andmed serverisse
  console.log('Form data:', { name, email, message });

  return { success: true, message: 'Thank you for your submission!' };
}

function ContactForm() {
  const { pending, data, error } = useFormStatus();
  const [optimisticMessage, setOptimisticMessage] = useState('');

  const handleSubmitOptimistic = async (formData) => {
      setOptimisticMessage('Submitting...');
      const result = await handleSubmit(formData); //Ootab serveritoimingu lõpuleviimist.
      if (result?.success){
        setOptimisticMessage(result.message)
      } else {
          setOptimisticMessage("");
      }

  };
  return (
    <form action={handleSubmitOptimistic}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" disabled={pending} />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" disabled={pending} />
      </div>
      <div>
        <label htmlFor="message">Message:</label>
        <textarea id="message" name="message" disabled={pending} />
      </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {optimisticMessage && <p style={{ color: 'green' }}>{optimisticMessage}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="aW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7CmltcG9ydCB7IGV4cGVyaW1lbnRhbF91c2VGb3JtU3RhdHVzIGFzIHVzZUZvcm1TdGF0dXMgfSBmcm9tICdyZWFjdC1kb20nOwoKYXN5bmMgZnVuY3Rpb24gaGFuZGxlU3VibWl0KGZvcm1EYXRhKSB7CiAgJ3VzZSBzZXJ2ZXInOwogIC8vIFNpbXVsZWVyaW1lIGFz/G5rcm9vbnNldCB2b3JtaSBlc2l0YW1pc3QKICBhd2FpdCBuZXcgUHJvbWlzZSgocmVzb2x2ZSkgPT4gc2V0VGltZW91dChyZXNvbHZlLCAyMDAwKSk7CgogIGNvbnN0IG5hbWUgPSBmb3JtRGF0YS5nZXQoJ25hbWUnKTsKICBjb25zdCBlbWFpbCA9IGZvcm1EYXRhLmdldCgnZW1haWwnKTsKICBjb25zdCBtZXNzYWdlID0gZm9ybURhdGEuZ2V0KCdtZXNzYWdlJyk7CgogIGlmICghbmFtZSB8fCAhZW1haWwgfHwgIW1lc3NhZ2UpIHsKICAgIHRocm93IG5ldyBFcnJvcignQWxsIGZpZWxkcyBhcmUgcmVxdWlyZWQuJyk7CiAgfQoKICAvLyBSZWFhbHNlcyByYWtlbmR1c2VzIHNhYWRha3NpdGUgYW5kbWVkIHNlcnZlcmlzc2UKICBjb25zb2xlLmxvZygnRm9ybSBkYXRhOicsIHsgbmFtZSwgZW1haWwsIG1lc3NhZ2UgfSk7CgogIHJldHVybiB7IHN1Y2Nlc3M6IHRydWUsIG1lc3NhZ2U6ICdUaGFuayB5b3UgZm9yIHlvdXIgc3VibWlzc2lvbiEnIH07Cn0KCmZ1bmN0aW9uIENvbnRhY3RGb3JtKCkgewogIGNvbnN0IHsgcGVuZGluZywgZGF0YSwgZXJyb3IgfSA9IHVzZUZvcm1TdGF0dXMoKTsKICBjb25zdCBbb3B0aW1pc3RpY01lc3NhZ2UsIHNldE9wdGltaXN0aWNNZXNzYWdlXSA9IHVzZVN0YXRlKCcnKTsKCiAgY29uc3QgaGFuZGxlU3VibWl0T3B0aW1pc3RpYyA9IGFzeW5jIChmb3JtRGF0YSkgPT4gewogICAgICBzZXRPcHRpbWlzdGljTWVzc2FnZSgnU3VibWl0dGluZy4uLicpOwogICAgICBjb25zdCByZXN1bHQgPSBhd2FpdCBoYW5kbGVTdWJtaXQoZm9ybURhdGEpOyAvL09vdGFiIHNlcnZlcml0b2ltaW5ndSBs9XB1bGV2aWltaXN0LgogICAgICBpZiAocmVzdWx0Py5zdWNjZXNzKXsKICAgICAgICBzZXRPcHRpbWlzdGljTWVzc2FnZShyZXN1bHQubWVzc2FnZSkKICAgICAgfSBlbHNlIHsKICAgICAgICAgIHNldE9wdGltaXN0aWNNZXNzYWdlKCIiKTsKICAgICAgfQoKICB9OwogIHJldHVybiAoCiAgICA8Zm9ybSBhY3Rpb249e2hhbmRsZVN1Ym1pdE9wdGltaXN0aWN9PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJuYW1lIj5OYW1lOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJuYW1lIiBuYW1lPSJuYW1lIiBkaXNhYmxlZD17cGVuZGluZ30gLz4KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9ImVtYWlsIj5FbWFpbDo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJlbWFpbCIgaWQ9ImVtYWlsIiBuYW1lPSJlbWFpbCIgZGlzYWJsZWQ9e3BlbmRpbmd9IC8+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJtZXNzYWdlIj5NZXNzYWdlOjwvbGFiZWw+CiAgICAgICAgPHRleHRhcmVhIGlkPSJtZXNzYWdlIiBuYW1lPSJtZXNzYWdlIiBkaXNhYmxlZD17cGVuZGluZ30gLz4KICAgICAgPC9kaXY+CiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0IiBkaXNhYmxlZD17cGVuZGluZ30+CiAgICAgICAge3BlbmRpbmcgPyAnU3VibWl0dGluZy4uLicgOiAnU3VibWl0J30KICAgICAgPC9idXR0b24+CgogICAgICB7ZXJyb3IgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdyZWQnIH19PkVycm9yOiB7ZXJyb3IubWVzc2FnZX08L3A+fQogICAgICB7b3B0aW1pc3RpY01lc3NhZ2UgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdncmVlbicgfX0+e29wdGltaXN0aWNNZXNzYWdlfTwvcD59CiAgICA8L2Zvcm0+CiAgKTsKfQoKZXhwb3J0IGRlZmF1bHQgQ29udGFjdEZvcm07Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>3. Edenemisindikaatorid failide üleslaadimisel</h3>

<p>Kuigi <code>experimental_useFormStatus</code> ei paku otse edenemise uuendusi failide üleslaadimisel, saate seda kombineerida teiste tehnikatega edenemisindikaatorite implementeerimiseks. Näiteks saate kasutada <code>FormData</code> API-d faili üleslaadimise edenemise jälgimiseks ja kasutajaliidese vastavaks uuendamiseks.</p>

<p><b>Märkus:</b> Kuna see hook töötab peamiselt koos serveritoimingutega, on otsene juurdepääs üleslaadimise edenemisele <code>experimental_useFormStatus</code>'i sees piiratud. Tavaliselt käsitleksite üleslaadimise edenemist oma serveritoimingu koodis (kui see on keskkonnast sõltuvalt võimalik) ja seejärel peegeldaksite vormi üldist esitamise staatust, kasutades <code>experimental_useFormStatus</code>'i.</p>

<h2>Globaalsed kaalutlused</h2>

<p>Globaalsele sihtrühmale vorme arendades on oluline arvestada järgmisega:</p>

<ul>
  <li><b>Lokaliseerimine:</b> Veenduge, et kõik vormi sildid, veateated ja eduteated on lokaliseeritud kasutaja eelistatud keelde. Kasutage tõlgete tõhusaks haldamiseks rahvusvahelistamise (i18n) teeke ja raamistikke.</li>
  <li><b>Kuupäeva- ja numbrivormingud:</b> Kasutage kasutaja lokaadile vastavaid kuupäeva- ja numbrivorminguid. Näiteks Ameerika Ühendriikides võidakse kuupäevi vormindada kui KK/PP/AAAA, kuid paljudes teistes riikides kui PP/KK/AAAA. Samamoodi võivad numbrivormingud kasutada erinevaid kümnendkoha eraldajaid ja tuhandete eraldajaid.</li>
  <li><b>Ajavööndid:</b> Kui teie vorm hõlmab ajakava koostamist või ajatundlikku teavet, olge ajavöönditega tähelepanelik. Võimaldage kasutajatel valida oma ajavöönd ja teisendage ajad vastavalt.</li>
  <li><b>Aadressivormingud:</b> Aadressivormingud on riigiti väga erinevad. Pakkuge paindlikke aadressivälju, mis mahutavad erinevaid aadressistruktuure.</li>
  <li><b>Juurdepääsetavus:</b> Veenduge, et teie vormid on juurdepääsetavad puuetega kasutajatele. Kasutage semantilisi HTML-elemente, pakkuge piltidele alternatiivteksti ja tagage, et teie vormid on klaviatuuriga navigeeritavad.</li>
  <li><b>Valuutavormingud:</b> Kui tegelete rahaliste väärtustega, vormindage valuuta vastavalt kasutaja asukohale. Kasutage valuutasümboleid ja vormindusreegleid, mis on kasutajale tuttavad. Näiteks USAs kasutaksite "$1,234.56", samas kui Saksamaal võiksite kasutada "1.234,56 €".</li>
  <li><b>Kultuuriline tundlikkus:</b> Olge teadlik kultuurilistest erinevustest, mis võivad vormi kujundust mõjutada. Näiteks võivad teatud värvidel või sümbolitel olla erinevates kultuurides erinevad tähendused.</li>
</ul>

<p><b>Näide: Rahvusvaheline aadressivorm</b></p>

<p>Lihtne aadressivorm võib eeldada USA-stiilis aadressi. Globaalselt teadlik vorm peab võimaldama suuremat paindlikkust.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
 <form>
  <label for="address1">Aadressirida 1:</label>
  <input type="text" id="address1" name="address1"><br><br>

  <label for="address2">Aadressirida 2 (valikuline):</label>
  <input type="text" id="address2" name="address2"><br><br>

  <label for="city">Linn:</label>
  <input type="text" id="city" name="city"><br><br>

  <label for="state">Osariik/maakond:</label>
  <input type="text" id="state" name="state"><br><br>

  <label for="postalCode">Postiindeks:</label>
  <input type="text" id="postalCode" name="postalCode"><br><br>

  <label for="country">Riik:</label>
  <select id="country" name="country">
   <option value="USA">Ameerika Ühendriigid</option>
   <option value="CAN">Kanada</option>
   {/* Rohkem riigivalikuid */}
  </select><br><br>

  <input type="submit" value="Esita">
 </form>
</code>
            <div class="copy-button-container">
              <button 
                data-code="CiA8Zm9ybT4KICA8bGFiZWwgZm9yPSJhZGRyZXNzMSI+QWFkcmVzc2lyaWRhIDE6PC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImFkZHJlc3MxIiBuYW1lPSJhZGRyZXNzMSI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0iYWRkcmVzczIiPkFhZHJlc3NpcmlkYSAyICh2YWxpa3VsaW5lKTo8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0iYWRkcmVzczIiIG5hbWU9ImFkZHJlc3MyIj48YnI+PGJyPgoKICA8bGFiZWwgZm9yPSJjaXR5Ij5MaW5uOjwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJjaXR5IiBuYW1lPSJjaXR5Ij48YnI+PGJyPgoKICA8bGFiZWwgZm9yPSJzdGF0ZSI+T3Nhcmlpay9tYWFrb25kOjwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJzdGF0ZSIgbmFtZT0ic3RhdGUiPjxicj48YnI+CgogIDxsYWJlbCBmb3I9InBvc3RhbENvZGUiPlBvc3RpaW5kZWtzOjwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJwb3N0YWxDb2RlIiBuYW1lPSJwb3N0YWxDb2RlIj48YnI+PGJyPgoKICA8bGFiZWwgZm9yPSJjb3VudHJ5Ij5SaWlrOjwvbGFiZWw+CiAgPHNlbGVjdCBpZD0iY291bnRyeSIgbmFtZT0iY291bnRyeSI+CiAgIDxvcHRpb24gdmFsdWU9IlVTQSI+QW1lZXJpa2Eg3GhlbmRyaWlnaWQ8L29wdGlvbj4KICAgPG9wdGlvbiB2YWx1ZT0iQ0FOIj5LYW5hZGE8L29wdGlvbj4KICAgey8qIFJvaGtlbSByaWlnaXZhbGlrdWlkICovfQogIDwvc2VsZWN0Pjxicj48YnI+CgogIDxpbnB1dCB0eXBlPSJzdWJtaXQiIHZhbHVlPSJFc2l0YSI+CiA8L2Zvcm0+Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Täiustused globaalseks kasutamiseks:</b></p>

<ul>
 <li>Kasutage põhjalikku riikide nimekirja.</li>
 <li>Kaaluge dünaamilist aadressiväljade seadistust vastavalt riigi valikule (kasutades teeki või API-d aadressivormingu valideerimiseks).</li>
 <li>Võimaldage aadressirida 3 või rohkem, kuna mõned riigid nõuavad väga spetsiifilist aadressi vormindamist.</li>
 <li>Eraldage "Osariik/maakond/regioon" ja "Postiindeks/ZIP-kood" eraldi väljadeks selgete siltidega, mis toimivad rahvusvaheliselt.</li>
</ul>

<h2>Parimad praktikad <code>experimental_useFormStatus</code>'i kasutamiseks</h2>

<ul>
  <li><b>Hoidke serveritoimingud lihtsad:</b> Püüdke hoida oma serveritoimingud keskendununa andmetöötlusele ja vältige keerukaid kasutajaliidese uuendusi otse toimingu sees. Toetuge <code>experimental_useFormStatus</code>'i tagastatud <code>data</code> omadusele, et uuendada kasutajaliidest kliendipoolses komponendis.</li>
  <li><b>Käsitlege vigu sujuvalt:</b> Implementeerige oma serveritoimingutes robustne veakäsitlus, et püüda kinni võimalikud erandid. Kasutage <code>error</code> omadust, et kuvada kasutajale informatiivseid veateateid.</li>
  <li><b>Andke selget tagasisidet:</b> Kasutage <code>pending</code> omadust, et anda kasutajale selget tagasisidet vormi esitamise ajal (nt esitamisnupu keelamine, laadimisindikaatori kuvamine).</li>
  <li><b>Optimeerige jõudlust:</b> Olge jõudluse osas tähelepanelik, eriti suurte vormide või keerukate serveritoimingutega tegelemisel. Kasutage oma rakenduse jõudluse optimeerimiseks tehnikaid nagu memoiseerimine ja koodi tükeldamine.</li>
  <li><b>Arvestage juurdepääsetavusega:</b> Veenduge, et teie vormid on juurdepääsetavad kõigile kasutajatele, sealhulgas puuetega inimestele. Järgige juurdepääsetavuse juhiseid ja kasutage oma vormide testimiseks abitehnoloogiaid.</li>
</ul>

<h2>Alternatiivid <code>experimental_useFormStatus</code>'ile</h2>

<p>Kuigi <code>experimental_useFormStatus</code> pakub mugavat viisi vormi staatuse haldamiseks, on olemas alternatiivseid lähenemisviise, mida võite kaaluda:</p>

<ul>
  <li><b>Kohandatud olekuhaldus:</b> Saate vormi staatust käsitsi hallata, kasutades Reacti sisseehitatud olekuhalduse funktsioone (nt <code>useState</code>, <code>useReducer</code>). See lähenemine pakub rohkem paindlikkust, kuid nõuab rohkem korduvkoodi.</li>
  <li><b>Vormiteegid:</b> Vormiteegid nagu Formik, React Hook Form ja Final Form pakuvad terviklikke vormihalduslahendusi, sealhulgas valideerimist, esitamise käsitlemist ja olekuhaldust.</li>
  <li><b>Kolmandate osapoolte olekuhaldusteegid:</b> Olekuhaldusteeke nagu Redux, Zustand ja Recoil saab kasutada vormi staatuse tsentraliseeritud haldamiseks. See lähenemine sobib suurematele rakendustele, millel on keerukad olekuhalduse nõuded.</li>
</ul>

<p>Lähenemisviisi valik sõltub teie rakenduse konkreetsetest nõuetest. <code>experimental_useFormStatus</code> sobib eriti hästi rakendustele, mis kasutavad Reacti serverikomponente ja vajavad lihtsat ning deklaratiivset viisi vormi staatuse haldamiseks.</p>

<h2>Kokkuvõte</h2>

<p><code>experimental_useFormStatus</code> on väärtuslik täiendus Reacti tööriistakasti dünaamiliste ja tundlike vormide ehitamiseks. Pakkudes tsentraliseeritud ja deklaratiivset viisi vormi staatuse haldamiseks, lihtsustab see hook asünkroonset vormikäsitlust, parandab kasutajakogemust ja täiustab veakäsitlust. Kuigi see on endiselt eksperimentaalne API, esindab <code>experimental_useFormStatus</code> paljulubavat suunda vormihalduses Reactis, eriti Reacti serverikomponentide kontekstis. Mõistes selle funktsioone, eeliseid ja parimaid praktikaid, saavad arendajad seda hooki kasutada, et luua robustsemaid ja kasutajasõbralikumaid vorme globaalsele sihtrühmale.</p>

<p>Nagu iga eksperimentaalse funktsiooni puhul, on oluline olla kursis viimaste arengutega ja valmis võimalikuks API muutusteks, kui see liigub stabiilse väljalaske suunas. Siiski jäävad <code>experimental_useFormStatus</code>'i põhiprintsiibid ja eelised tõenäoliselt asjakohaseks, muutes selle väärtuslikuks tööriistaks, mida uurida ja oma Reacti arendusvoogu lisada.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">experimental_useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">vormi staatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">vormihaldus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Reacti serverikomponendid</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">kasutajakogemus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">vormi esitamine</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">asünkroonsed vormid</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progressiivne täiustamine</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RC("B:1","S:1")</script></body></html>